<template>
  <div>
    <span>{{ item.title }}</span>
    &nbsp;
    <span>{{ item.price }}元</span>
    &nbsp;
    <button :disabled="!item.inventory" href="#" @click="addProductToCart(item)">加入购物车</button>
  </div>
</template>

<script>
// import event from "../event";
import { mapActions } from "vuex";

export default {
  props: {
      item: {
          type: Object,
          default() {
              return {
                  // id: 1,
                  // title: '商品A',
                  // price: 10
              }
          }
      }
  },
  // methods: {
  //     clickHandler(id, e) {
  //         e.preventDefault()
  //         event.$emit('addToCart', id)
  //     }
  // },
  methods: mapActions("cart", [
    // 添加商品到购物车
    "addProductToCart",
  ]),
};
</script>